<template>
  <div class="conter">

    <div class="search">
      <div class="site" @click="goNavigation">
        {{cityName}}
      </div>
      
      <div class="searchConter">
        <i class="cc- cc-sousuo"></i>
        <input type="input" placeholder="请输入你要搜索的商品" @click="toSeach">
      </div>
    </div>
    <div class="swContainer">
      <swiper indicator-dots autoplay circular class="sw">
          <block v-for="(item,index) in bannerList" :key="index">
              <swiper-item class="swItem">
                
                  <image :src="item.image_url" class="swImage"></image>
              </swiper-item>
          </block>
      </swiper>
    </div>  

    <div class="channel">
      <div class="channelContent" v-for="(item,index) in channel" :key="index">
        <img :src="item.icon_url">
        <div class="channelTitle">{{item.name}}</div>
      </div>
    </div>  

    <div class="brand">
      <div class="headline">品牌制造商直供</div>
      <div class="brandBox">
        <div class="brandItem" v-for="(item,index) in brand " :key="index" @click="goBrand(item)">
          <img :src="item.pic_url" alt="">
          <div class="itemFont">
            <div class="brandName">{{item.name}}</div>
            <div class="floorPrice">{{item.floor_price}}元起</div>
          </div>
        </div>        

      </div>

    </div>

    <div class="newTopics">
      <div class="headline">
        <p>新品首发</p>
        <p>查看全部</p>
      </div>
      <div class="topicesItem">
         <ul class="newGoods" >
          <scroll-view
            scroll-x
            scroll-with-animation
            >
              <li v-for="(item,index) in newGoods" :key="index">
                <img :src="item.list_pic_url">
                <p>{{item.name}}</p>
                <p>{{item.goods_brief}}</p>
                <p>￥ {{item.retail_price}}</p>                   
              </li>
              
          </scroll-view>
        </ul>
      </div>
    </div>

    <div class="newTopics topSale">
      <div class="headline">
        <p>人气推荐</p>
        <p>查看全部</p>
      </div>
      <div class="topicesItem">
          <ul class="newGoods" >
          <scroll-view
            scroll-x
            scroll-with-animation
            >
              <li v-for="(item,index) in hotGoods" :key="index">
                <img :src="item.list_pic_url">
                <p>{{item.name}}</p>
                <p>{{item.goods_brief}}</p>
                <p>￥ {{item.retail_price}}</p>                   
              </li>
              
          </scroll-view>
        </ul>
      </div>
    </div>

    <div class="exquisite">
      <div class="headline">
        <p>专题精选</p>
        <img src="../../../static/images/right.png" alt="">
      </div>
      <div class="exquisite-content">
        <ul class="box">
           <scroll-view
            scroll-x
            scroll-with-animation
            >
            <li class="excontent" v-for="(item,index) in exquisite" :key="index">
              <div class="imgBox">
                <img :src="item.item_pic_url" alt="">
              </div>
              <div class="extitle">
                <div class="st">
                  <span class="st-title">{{item.title}}</span>
                  <span class="st-price">{{item.price_info}}元起</span>                  
                </div>
 
                <span class="exquisitedrief">{{item.subtitle}}</span>
              </div>
            </li>
          </scroll-view>

        </ul>
      </div>
    </div>

    <div class="categoryGoods" v-for="(item,index) in categoryGoodsList" :key="index">
      <div class="categoryGoods-headline">
        {{item.name}}好物
      </div>
      <div class="categoryGoods-box">
        <div class="categoryGoodscontent" v-for="(citem,cindex) in item.child" :key="cindex">

          <div class="categoryImg">
            <img :src="citem.list_pic_url" alt="">
          </div>
          <span class="categoryTitle">
            {{citem.name}}
          </span>
          <div class="categoryPirce">
            ￥{{citem.retail_price}}元
          </div>
        </div>
        <div class="mark">
          <span class="mark-title">{{item.name}}好物</span>
          <div class="mark-img"></div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import amapFile from "../../utils/amap-wx";


export default {
  data(){
    return{
      site:'未知地区',
      bannerList:[],
      channel:[],
      brand:[],
      newGoods:[],
      hotGoods:[],
      exquisite:[],
      categoryGoodsList:[]
    }
  },
  methods:{
    goNavigation(){
      let _this = this
      
      // 打开微信授权
      wx.getSetting({ 
        success: res => {
          
          if(!res.authSetting["scope.userLocation"]){
            wx.openSetting({ success: res => {
              _this.getCityName()
            } });
          }else{
            wx.navigateTo({ url: '/pages/navigation/main' });
          //   // _this.getCityName()
          }
      } ,
      fail:(err)=>{
        console.log(err);
      }
      });
    },
    getCityName(){
      const _this = this
      const map = new amapFile.AMapWX({
        key:'6b38a77573ebc1ecfbfc03cffa396a00'
      })
        map.getRegeo({
        success: function(data){
          //成功回调
          _this.site = data[0].name
        },
        fail: function(info){
          //失败回调
          console.log(info)
        }
      })
    },
    // 获取Banner
    async getBanner(){
      let result = await this.$api.home.reqBanner()
      if(result.status === 200){
        this.bannerList = result.banner
        this.brand = result.brand
        this.channel = result.channel
        this.newGoods = result.newGoods
        this.hotGoods = result.hotGoods
        this.exquisite = result.exquisite
        this.categoryGoodsList = result.ndCategory


      }else{
        console.log('banner获取失败')
      }

    },
    goBrand(item){
      wx.navigateTo({ url: `/pages/brandList/main?id=${item.id}` });
    },
    toSeach(){
      wx.navigateTo({ url: '/pages/search/main' });
    }
    
  },
  computed:{
    ...mapState(['cityName'])
  },
  mounted(){
    this.getBanner()
    this.getCityName()
  }


}
</script>

<style lang="less" scoped>
@import './index.less';


</style>